//
// Visual blocks
//

.mce-visualblocks {
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  div:not([data-mce-bogus]),
  section,
  article,
  blockquote,
  address,
  pre,
  figure,
  figcaption,
  hgroup,
  aside,
  ul,
  ol,
  dl {
    background-repeat: no-repeat;
    border: 1px dashed #bbb;
    margin-left: 3px;
    padding-top: 10px;
  }

  p {
    background-image: url();
  }

  h1 {
    background-image: url();
  }

  h2 {
    background-image: url();
  }

  h3 {
    background-image: url();
  }

  h4 {
    background-image: url();
  }

  h5 {
    background-image: url();
  }

  h6 {
    background-image: url();
  }

  // Needs to exclude data-mce-bogus since those are used by resize-handles and other UI elements that shouldn't be styled
  div:not([data-mce-bogus]) {
    background-image: url();
  }

  section {
    background-image: url();
  }

  article {
    background-image: url();
  }

  blockquote {
    background-image: url();
  }

  address {
    background-image: url();
  }

  pre {
    background-image: url();
  }

  figure {
    background-image: url();
  }

  figcaption {
    border: 1px dashed #bbb;
  }

  hgroup {
    background-image: url();
  }

  aside {
    background-image: url();
  }

  ul {
    background-image: url();
  }

  ol {
    background-image: url();
  }

  dl {
    background-image: url();
  }
}

.mce-visualblocks:not([dir=rtl]) {
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  div:not([data-mce-bogus]),
  section,
  article,
  blockquote,
  address,
  pre,
  figure,
  figcaption,
  hgroup,
  aside,
  ul,
  ol,
  dl {
    margin-left: 3px;
  }
}

// RTL
.mce-visualblocks[dir=rtl] {
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  div:not([data-mce-bogus]),
  section,
  article,
  blockquote,
  address,
  pre,
  figure,
  figcaption,
  hgroup,
  aside,
  ul,
  ol,
  dl {
    background-position-x: right;
    margin-right: 3px;
  }
}
